<template>
  <div class="work-detail-container">
    <n-card class="work-detail-card">
      <!-- 返回按钮 -->
      <div class="back-button">
        <n-button quaternary circle @click="goBack">
          <template #icon><n-icon><ArrowBack /></n-icon></template>
        </n-button>
        <span>返回</span>
      </div>
      
      <!-- 作品播放区 -->
      <div class="player-section">
        <div class="video-container">
          <img v-if="!isPlaying" :src="work.coverUrl" alt="封面" class="video-cover" @click="startPlay">
          <div v-if="!isPlaying" class="play-button" @click="startPlay">
            <n-icon size="48"><Play /></n-icon>
          </div>
          <video 
            v-show="isPlaying" 
            ref="videoPlayer" 
            class="video-player" 
            controls 
            @ended="handleVideoEnded"
          >
            <source :src="work.videoUrl" type="video/mp4">
            您的浏览器不支持视频播放
          </video>
        </div>
      </div>
      
      <!-- 作品信息区 -->
      <div class="work-info-section">
        <h1 class="work-title">{{ work.title }}</h1>
        
        <div class="work-stats">
          <span class="stat-item"><n-icon><Eye /></n-icon> {{ formatNumber(work.views) }} 次观看</span>
          <span class="stat-item"><n-icon><Calendar /></n-icon> {{ formatDate(work.publishDate) }} 发布</span>
          <span class="stat-item"><n-icon><Time /></n-icon> {{ formatDuration(work.duration) }}</span>
        </div>
        
        <div class="action-buttons">
          <n-button type="primary" @click="handleLike">
            <template #icon><n-icon><ThumbsUp /></n-icon></template>
            {{ work.isLiked ? '已点赞' : '点赞' }} {{ formatNumber(work.likes) }}
          </n-button>
          <n-button @click="handleFavorite">
            <template #icon><n-icon><Star /></n-icon></template>
            {{ work.isFavorite ? '已收藏' : '收藏' }}
          </n-button>
          <n-button @click="handleShare">
            <template #icon><n-icon><Share /></n-icon></template>
            分享
          </n-button>
          <n-dropdown trigger="click" :options="moreOptions" @select="handleMoreAction">
            <n-button quaternary circle>
              <template #icon><n-icon><EllipsisHorizontal /></n-icon></template>
            </n-button>
          </n-dropdown>
        </div>
        
        <n-divider />
        
        <!-- 创作者信息 -->
        <div class="creator-info">
          <div class="creator-profile" @click="goToUserProfile(work.creator.id)">
            <img :src="work.creator.avatar" :alt="work.creator.name" class="creator-avatar">
            <div class="creator-details">
              <div class="creator-name">{{ work.creator.name }}</div>
              <div class="creator-stats">{{ formatNumber(work.creator.followers) }} 粉丝</div>
            </div>
          </div>
          <n-button type="primary" ghost :disabled="work.creator.isFollowed">
            {{ work.creator.isFollowed ? '已关注' : '+ 关注' }}
          </n-button>
        </div>
        
        <!-- 作品描述 -->
        <div class="work-description">
          <div class="description-text" :class="{ 'expanded': isDescriptionExpanded }">
            {{ work.description }}
          </div>
          <n-button v-if="work.description.length > 100" text @click="toggleDescription">
            {{ isDescriptionExpanded ? '收起' : '展开' }}
          </n-button>
        </div>
        
        <n-divider />
      </div>
      
      <!-- 标签区 -->
      <div class="tags-section">
        <n-tag v-for="tag in work.tags" :key="tag" size="medium" @click="searchByTag(tag)">
          {{ tag }}
        </n-tag>
      </div>
      
      <!-- 评论区 -->
      <div class="comments-section">
        <h2 class="section-title">评论 ({{ work.comments.length }})</h2>
        
        <!-- 评论输入框 -->
        <div class="comment-input">
          <n-input 
            v-model:value="commentText" 
            type="textarea" 
            placeholder="发表评论..." 
            :autosize="{ minRows: 2, maxRows: 6 }"
          />
          <div class="comment-actions">
            <n-button type="primary" :disabled="!commentText.trim()" @click="submitComment">发表评论</n-button>
          </div>
        </div>
        
        <!-- 评论列表 -->
        <div class="comments-list">
          <div v-for="comment in work.comments" :key="comment.id" class="comment-item">
            <img :src="comment.user.avatar" :alt="comment.user.name" class="comment-avatar">
            <div class="comment-content">
              <div class="comment-header">
                <span class="comment-username">{{ comment.user.name }}</span>
                <span class="comment-time">{{ formatTimeAgo(comment.createTime) }}</span>
              </div>
              <div class="comment-text">{{ comment.content }}</div>
              <div class="comment-actions">
                <n-button text size="small" @click="likeComment(comment.id)">
                  <n-icon><ThumbsUp /></n-icon> {{ comment.likes }}
                </n-button>
                <n-button text size="small" @click="replyToComment(comment.id)">
                  <n-icon><ChatbubbleEllipses /></n-icon> 回复
                </n-button>
              </div>
              
              <!-- 回复列表 -->
              <div v-if="comment.replies && comment.replies.length > 0" class="replies-list">
                <div v-for="reply in comment.replies" :key="reply.id" class="reply-item">
                  <img :src="reply.user.avatar" :alt="reply.user.name" class="reply-avatar">
                  <div class="reply-content">
                    <div class="reply-header">
                      <span class="reply-username">{{ reply.user.name }}</span>
                      <span class="reply-time">{{ formatTimeAgo(reply.createTime) }}</span>
                    </div>
                    <div class="reply-text">
                      <template v-if="reply.replyTo">
                        回复 <span class="reply-to">@{{ reply.replyTo.name }}</span>:
                      </template>
                      {{ reply.content }}
                    </div>
                    <div class="reply-actions">
                      <n-button text size="small" @click="likeReply(comment.id, reply.id)">
                        <n-icon><ThumbsUp /></n-icon> {{ reply.likes }}
                      </n-button>
                      <n-button text size="small" @click="replyToReply(comment.id, reply.id, reply.user)">
                        <n-icon><ChatbubbleEllipses /></n-icon> 回复
                      </n-button>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 回复输入框 -->
              <div v-if="replyingTo === comment.id" class="reply-input">
                <n-input 
                  v-model:value="replyText" 
                  type="textarea" 
                  :placeholder="replyToUser ? `回复 @${replyToUser.name}` : '发表回复...'" 
                  :autosize="{ minRows: 1, maxRows: 4 }"
                />
                <div class="reply-actions">
                  <n-button size="small" @click="cancelReply">取消</n-button>
                  <n-button type="primary" size="small" :disabled="!replyText.trim()" @click="submitReply(comment.id)">回复</n-button>
                </div>
              </div>
              
              <!-- 加载更多回复 -->
              <div v-if="comment.totalReplies > comment.replies.length" class="load-more-replies">
                <n-button text @click="loadMoreReplies(comment.id)">
                  加载更多回复 ({{ comment.totalReplies - comment.replies.length }})
                </n-button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 加载更多评论 -->
        <div v-if="hasMoreComments" class="load-more-comments">
          <n-button @click="loadMoreComments">加载更多评论</n-button>
        </div>
      </div>
    </n-card>
    
    <!-- 相关作品 -->
    <n-card class="related-works-card" title="相关作品">
      <div class="related-works-grid">
        <div v-for="relatedWork in relatedWorks" :key="relatedWork.id" class="related-work-card" @click="goToWorkDetail(relatedWork.id)">
          <div class="related-work-thumbnail">
            <img :src="relatedWork.thumbnail" :alt="relatedWork.title">
            <div class="related-work-duration">{{ formatDuration(relatedWork.duration) }}</div>
          </div>
          <div class="related-work-info">
            <h3 class="related-work-title">{{ relatedWork.title }}</h3>
            <div class="related-work-meta">
              <span class="related-work-creator">{{ relatedWork.creator.name }}</span>
              <span class="related-work-views">{{ formatNumber(relatedWork.views) }} 次观看</span>
            </div>
          </div>
        </div>
      </div>
    </n-card>
    
    <!-- 分享弹窗 -->
    <n-modal v-model:show="showShareModal" preset="card" title="分享作品" style="width: 400px;">
      <div class="share-options">
        <div v-for="option in shareOptions" :key="option.type" class="share-option" @click="shareVia(option.type)">
          <n-icon size="24" :color="option.color">
            <component :is="option.icon" />
          </n-icon>
          <span>{{ option.name }}</span>
        </div>
      </div>
      <div class="share-link">
        <n-input-group>
          <n-input v-model:value="shareLink" readonly />
          <n-button type="primary" @click="copyShareLink">复制</n-button>
        </n-input-group>
      </div>
    </n-modal>
    
    <!-- 举报弹窗 -->
    <n-modal v-model:show="showReportModal" preset="card" title="举报作品" style="width: 500px;">
      <div class="report-form">
        <n-form :model="reportForm" label-placement="left" label-width="80">
          <n-form-item label="举报原因" required>
            <n-select v-model:value="reportForm.reason" :options="reportReasons" placeholder="请选择举报原因" />
          </n-form-item>
          <n-form-item label="详细说明">
            <n-input 
              v-model:value="reportForm.description" 
              type="textarea" 
              placeholder="请详细描述问题（可选）" 
              :autosize="{ minRows: 3, maxRows: 6 }"
            />
          </n-form-item>
        </n-form>
        <div class="report-actions">
          <n-button @click="showReportModal = false">取消</n-button>
          <n-button type="primary" :disabled="!reportForm.reason" @click="submitReport">提交</n-button>
        </div>
      </div>
    </n-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { 
  NCard, 
  NButton, 
  NIcon, 
  NDivider, 
  NTag, 
  NInput, 
  NInputGroup,
  NModal,
  NForm,
  NFormItem,
  NSelect,
  NDropdown,
  useMessage
} from 'naive-ui'
import {
  ArrowBack,
  Play,
  Eye,
  Calendar,
  Time,
  ThumbsUp,
  Star,
  Share,
  EllipsisHorizontal,
  ChatbubbleEllipses
} from '@vicons/ionicons5'

// 路由和消息
const route = useRoute()
const router = useRouter()
const message = useMessage()

// 视频播放状态
const videoPlayer = ref<HTMLVideoElement | null>(null)
const isPlaying = ref(false)

// 评论相关状态
const commentText = ref('')
const replyText = ref('')
const replyingTo = ref('')
const replyToUser = ref<{ id: string; name: string } | null>(null)
const hasMoreComments = ref(true)

// 弹窗状态
const showShareModal = ref(false)
const showReportModal = ref(false)
const shareLink = ref('')

// 描述展开状态
const isDescriptionExpanded = ref(false)

// 举报表单
const reportForm = reactive({
  reason: '',
  description: ''
})

// 举报原因选项
const reportReasons = [
  { label: '违法违规内容', value: 'illegal' },
  { label: '侵犯版权', value: 'copyright' },
  { label: '色情低俗', value: 'adult' },
  { label: '暴力血腥', value: 'violence' },
  { label: '不实信息', value: 'fake' },
  { label: '其他问题', value: 'other' }
]

// 更多操作选项
const moreOptions = [
  {
    label: '下载',
    key: 'download'
  },
  {
    label: '不感兴趣',
    key: 'not-interested'
  },
  {
    label: '举报',
    key: 'report'
  }
]

// 分享选项
const shareOptions = [
  { type: 'weixin', name: '微信', icon: 'WechatOutlined', color: '#07C160' },
  { type: 'weibo', name: '微博', icon: 'WeiboOutlined', color: '#E6162D' },
  { type: 'qq', name: 'QQ', icon: 'QqOutlined', color: '#12B7F5' },
  { type: 'link', name: '复制链接', icon: 'LinkOutlined', color: '#1890ff' }
]

// 模拟作品数据
const work = ref({
  id: '1',
  title: '皮影戏《西游记》片段',
  description: '这是一段使用皮影快闪软件制作的《西游记》片段，展示了孙悟空大闹天宫的经典场景。作品采用了传统皮影造型，结合现代动画技术，呈现出独特的艺术风格。制作过程中使用了多层次动画和特效，希望大家喜欢！',
  coverUrl: 'https://picsum.photos/id/1015/800/450',
  videoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4', // 示例视频URL
  duration: 180, // 3分钟
  views: 12580,
  likes: 1024,
  publishDate: new Date('2023-05-15'),
  isLiked: false,
  isFavorite: false,
  tags: ['皮影戏', '西游记', '动画', '传统文化'],
  creator: {
    id: '101',
    name: '皮影大师',
    avatar: 'https://picsum.photos/id/1005/100/100',
    followers: 5280,
    isFollowed: false
  },
  comments: [
    {
      id: 'c1',
      content: '这个作品太棒了！传统与现代的结合非常成功。',
      createTime: new Date('2023-05-16T08:30:00'),
      likes: 42,
      user: {
        id: 'u1',
        name: '动画爱好者',
        avatar: 'https://picsum.photos/id/1012/100/100'
      },
      replies: [
        {
          id: 'r1',
          content: '确实，特别是那个大闹天宫的场景，做得太精彩了！',
          createTime: new Date('2023-05-16T09:15:00'),
          likes: 12,
          user: {
            id: 'u2',
            name: '文化研究者',
            avatar: 'https://picsum.photos/id/1025/100/100'
          }
        },
        {
          id: 'r2',
          content: '请问这个软件好用吗？我也想尝试做皮影动画。',
          createTime: new Date('2023-05-16T10:20:00'),
          likes: 8,
          user: {
            id: 'u3',
            name: '新手动画师',
            avatar: 'https://picsum.photos/id/1074/100/100'
          },
          replyTo: {
            id: 'u1',
            name: '动画爱好者'
          }
        }
      ],
      totalReplies: 5
    },
    {
      id: 'c2',
      content: '配乐选得很到位，增强了整体氛围。',
      createTime: new Date('2023-05-17T14:25:00'),
      likes: 28,
      user: {
        id: 'u4',
        name: '音乐制作人',
        avatar: 'https://picsum.photos/id/1084/100/100'
      },
      replies: [],
      totalReplies: 0
    }
  ]
})

// 相关作品
const relatedWorks = ref([
  {
    id: '2',
    title: '皮影戏《封神榜》片段',
    thumbnail: 'https://picsum.photos/id/1019/300/200',
    duration: 240,
    views: 8426,
    creator: {
      id: '102',
      name: '传统艺术家',
      avatar: 'https://picsum.photos/id/1025/100/100'
    }
  },
  {
    id: '3',
    title: '现代皮影创作技巧教程',
    thumbnail: 'https://picsum.photos/id/1039/300/200',
    duration: 540,
    views: 15280,
    creator: {
      id: '101',
      name: '皮影大师',
      avatar: 'https://picsum.photos/id/1005/100/100'
    }
  },
  {
    id: '4',
    title: '皮影戏《白蛇传》',
    thumbnail: 'https://picsum.photos/id/1043/300/200',
    duration: 320,
    views: 6352,
    creator: {
      id: '103',
      name: '民间艺术团',
      avatar: 'https://picsum.photos/id/1062/100/100'
    }
  }
])

// 返回上一页
const goBack = () => {
  router.back()
}

// 开始播放视频
const startPlay = () => {
  isPlaying.value = true
  setTimeout(() => {
    if (videoPlayer.value) {
      videoPlayer.value.play()
    }
  }, 100)
}

// 视频播放结束
const handleVideoEnded = () => {
  isPlaying.value = false
}

// 点赞作品
const handleLike = () => {
  if (work.value.isLiked) {
    work.value.likes--
  } else {
    work.value.likes++
  }
  work.value.isLiked = !work.value.isLiked
  message.success(work.value.isLiked ? '点赞成功' : '已取消点赞')
}

// 收藏作品
const handleFavorite = () => {
  work.value.isFavorite = !work.value.isFavorite
  message.success(work.value.isFavorite ? '收藏成功' : '已取消收藏')
}

// 分享作品
const handleShare = () => {
  shareLink.value = `https://example.com/work/${work.value.id}`
  showShareModal.value = true
}

// 通过特定平台分享
const shareVia = (type: string) => {
  message.success(`已通过${type}分享`)
  showShareModal.value = false
}

// 复制分享链接
const copyShareLink = () => {
  navigator.clipboard.writeText(shareLink.value)
    .then(() => {
      message.success('链接已复制到剪贴板')
    })
    .catch(() => {
      message.error('复制失败，请手动复制')
    })
}

// 处理更多操作
const handleMoreAction = (key: string) => {
  switch (key) {
    case 'download':
      message.success('开始下载作品')
      break
    case 'not-interested':
      message.success('已将该作品标记为不感兴趣')
      break
    case 'report':
      showReportModal.value = true
      break
  }
}

// 提交举报
const submitReport = () => {
  message.success('举报已提交，我们会尽快处理')
  showReportModal.value = false
  reportForm.reason = ''
  reportForm.description = ''
}

// 切换描述展开状态
const toggleDescription = () => {
  isDescriptionExpanded.value = !isDescriptionExpanded.value
}

// 提交评论
const submitComment = () => {
  if (!commentText.value.trim()) return
  
  const newComment = {
    id: `c${Date.now()}`,
    content: commentText.value,
    createTime: new Date(),
    likes: 0,
    user: {
      id: 'current-user',
      name: '当前用户',
      avatar: 'https://picsum.photos/id/1005/100/100'
    },
    replies: [],
    totalReplies: 0
  }
  
  work.value.comments.unshift(newComment)
  commentText.value = ''
  message.success('评论发表成功')
}

// 回复评论
const replyToComment = (commentId: string) => {
  replyingTo.value = commentId
  replyToUser.value = null
  replyText.value = ''
}

// 回复回复
const replyToReply = (commentId: string, replyId: string, user: any) => {
  replyingTo.value = commentId
  replyToUser.value = user
  replyText.value = ''
}

// 取消回复
const cancelReply = () => {
  replyingTo.value = ''
  replyToUser.value = null
  replyText.value = ''
}

// 提交回复
const submitReply = (commentId: string) => {
  if (!replyText.value.trim()) return
  
  const comment = work.value.comments.find(c => c.id === commentId)
  if (!comment) return
  
  const newReply = {
    id: `r${Date.now()}`,
    content: replyText.value,
    createTime: new Date(),
    likes: 0,
    user: {
      id: 'current-user',
      name: '当前用户',
      avatar: 'https://picsum.photos/id/1005/100/100'
    },
    replyTo: replyToUser.value || undefined
  }
  
  comment.replies.push(newReply)
  comment.totalReplies++
  replyingTo.value = ''
  replyToUser.value = null
  replyText.value = ''
  message.success('回复发表成功')
}

// 点赞评论
const likeComment = (commentId: string) => {
  const comment = work.value.comments.find(c => c.id === commentId)
  if (comment) {
    comment.likes++
    message.success('点赞成功')
  }
}

// 点赞回复
const likeReply = (commentId: string, replyId: string) => {
  const comment = work.value.comments.find(c => c.id === commentId)
  if (!comment) return
  
  const reply = comment.replies.find(r => r.id === replyId)
  if (reply) {
    reply.likes++
    message.success('点赞成功')
  }
}

// 加载更多回复
const loadMoreReplies = (commentId: string) => {
  const comment = work.value.comments.find(c => c.id === commentId)
  if (!comment) return
  
  // 模拟加载更多回复
  setTimeout(() => {
    const newReplies = [
      {
        id: `r${Date.now()}1`,
        content: '这是加载的更多回复内容1',
        createTime: new Date('2023-05-16T11:30:00'),
        likes: 3,
        user: {
          id: 'u5',
          name: '文化爱好者',
          avatar: 'https://picsum.photos/id/1062/100/100'
        }
      },
      {
        id: `r${Date.now()}2`,
        content: '这是加载的更多回复内容2',
        createTime: new Date('2023-05-16T12:15:00'),
        likes: 1,
        user: {
          id: 'u6',
          name: '动画学习者',
          avatar: 'https://picsum.photos/id/1066/100/100'
        },
        replyTo: {
          id: 'u1',
          name: '动画爱好者'
        }
      }
    ]
    
    comment.replies.push(...newReplies)
    // 如果所有回复都加载完了
    if (comment.replies.length >= comment.totalReplies) {
      comment.totalReplies = comment.replies.length
    }
    
    message.success('已加载更多回复')
  }, 500)
}

// 加载更多评论
const loadMoreComments = () => {
  // 模拟加载更多评论
  setTimeout(() => {
    const newComments = [
      {
        id: `c${Date.now()}1`,
        content: '人物造型很有特色，非常喜欢！',
        createTime: new Date('2023-05-18T09:45:00'),
        likes: 15,
        user: {
          id: 'u7',
          name: '设计师小王',
          avatar: 'https://picsum.photos/id/1066/100/100'
        },
        replies: [],
        totalReplies: 0
      },
      {
        id: `c${Date.now()}2`,
        content: '希望能看到更多这样的作品，支持传统文化！',
        createTime: new Date('2023-05-18T10:20:00'),
        likes: 21,
        user: {
          id: 'u8',
          name: '文化研究者',
          avatar: 'https://picsum.photos/id/1074/100/100'
        },
        replies: [],
        totalReplies: 0
      }
    ]
    
    work.value.comments.push(...newComments)
    
    // 假设这是最后一批评论
    hasMoreComments.value = false
    message.success('已加载更多评论')
  }, 800)
}

// 跳转到用户主页
const goToUserProfile = (userId: string) => {
  router.push(`/user-profile/${userId}`)
}

// 跳转到作品详情
const goToWorkDetail = (workId: string) => {
  router.push(`/work-detail/${workId}`)
}

// 通过标签搜索
const searchByTag = (tag: string) => {
  router.push({
    path: '/community',
    query: { tag }
  })
}

// 格式化数字
const formatNumber = (num: number) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + 'w'
  } else if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'k'
  }
  return num.toString()
}

// 格式化时长
const formatDuration = (seconds: number) => {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
}

// 格式化日期
const formatDate = (date: Date) => {
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
}

// 格式化相对时间
const formatTimeAgo = (date: Date) => {
  const now = new Date()
  const diffMs = now.getTime() - date.getTime()
  const diffSec = Math.floor(diffMs / 1000)
  const diffMin = Math.floor(diffSec / 60)
  const diffHour = Math.floor(diffMin / 60)
  const diffDay = Math.floor(diffHour / 24)
  
  if (diffDay > 0) {
    return diffDay + '天前'
  } else if (diffHour > 0) {
    return diffHour + '小时前'
  } else if (diffMin > 0) {
    return diffMin + '分钟前'
  } else {
    return '刚刚'
  }
}

// 获取作品详情
const fetchWorkDetail = (id: string) => {
  // 实际项目中，这里会根据ID从API获取作品详情
  console.log('获取作品ID:', id)
  // 这里使用的是模拟数据
}

// 生命周期钩子
onMounted(() => {
  const workId = route.params.id as string
  fetchWorkDetail(workId)
})
</script>

<style lang="scss" scoped>
.work-detail-container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  
  .work-detail-card {
    position: relative;
    
    .back-button {
      position: absolute;
      top: 20px;
      left: 20px;
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 4px;
      color: white;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
      cursor: pointer;
      
      span {
        font-size: 14px;
      }
    }
    
    .player-section {
      margin: -16px -16px 16px -16px;
      
      .video-container {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%; /* 16:9 比例 */
        background-color: #000;
        overflow: hidden;
        
        .video-cover {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          cursor: pointer;
        }
        
        .play-button {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 80px;
          height: 80px;
          border-radius: 50%;
          background-color: rgba(0, 0, 0, 0.6);
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          color: white;
          transition: background-color 0.2s;
          
          &:hover {
            background-color: rgba(0, 0, 0, 0.8);
          }
        }
        
        .video-player {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }
    }
    
    .work-info-section {
      .work-title {
        font-size: 24px;
        font-weight: 500;
        margin: 0 0 12px 0;
      }
      
      .work-stats {
        display: flex;
        gap: 16px;
        margin-bottom: 16px;
        font-size: 14px;
        color: var(--text-color-secondary);
        
        .stat-item {
          display: flex;
          align-items: center;
          gap: 4px;
        }
      }
      
      .action-buttons {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
      }
      
      .creator-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 16px 0;
        
        .creator-profile {
          display: flex;
          align-items: center;
          gap: 12px;
          cursor: pointer;
          
          .creator-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
          }
          
          .creator-details {
            .creator-name {
              font-size: 16px;
              font-weight: 500;
            }
            
            .creator-stats {
              font-size: 14px;
              color: var(--text-color-secondary);
            }
          }
        }
      }
      
      .work-description {
        margin: 16px 0;
        
        .description-text {
          font-size: 14px;
          line-height: 1.6;
          max-height: 80px;
          overflow: hidden;
          transition: max-height 0.3s;
          
          &.expanded {
            max-height: 1000px;
          }
        }
      }
    }
    
    .tags-section {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 24px;
    }
    
    .comments-section {
      .section-title {
        font-size: 18px;
        font-weight: 500;
        margin: 0 0 16px 0;
      }
      
      .comment-input {
        margin-bottom: 24px;
        
        .comment-actions {
          display: flex;
          justify-content: flex-end;
          margin-top: 12px;
        }
      }
      
      .comments-list {
        .comment-item {
          display: flex;
          gap: 16px;
          margin-bottom: 24px;
          
          .comment-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
          }
          
          .comment-content {
            flex: 1;
            
            .comment-header {
              display: flex;
              justify-content: space-between;
              margin-bottom: 4px;
              
              .comment-username {
                font-weight: 500;
              }
              
              .comment-time {
                font-size: 12px;
                color: var(--text-color-secondary);
              }
            }
            
            .comment-text {
              margin-bottom: 8px;
              line-height: 1.5;
            }
            
            .comment-actions {
              display: flex;
              gap: 16px;
              margin-bottom: 12px;
            }
            
            .replies-list {
              margin-left: 24px;
              
              .reply-item {
                display: flex;
                gap: 12px;
                margin-bottom: 12px;
                
                .reply-avatar {
                  width: 32px;
                  height: 32px;
                  border-radius: 50%;
                  object-fit: cover;
                }
                
                .reply-content {
                  flex: 1;
                  
                  .reply-header {
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 4px;
                    
                    .reply-username {
                      font-weight: 500;
                    }
                    
                    .reply-time {
                      font-size: 12px;
                      color: var(--text-color-secondary);
                    }
                  }
                  
                  .reply-text {
                    margin-bottom: 8px;
                    line-height: 1.5;
                    
                    .reply-to {
                      color: var(--primary-color);
                      font-weight: 500;
                    }
                  }
                  
                  .reply-actions {
                    display: flex;
                    gap: 16px;
                  }
                }
              }
            }
            
            .reply-input {
              margin: 12px 0;
              
              .reply-actions {
                display: flex;
                justify-content: flex-end;
                gap: 8px;
                margin-top: 8px;
              }
            }
            
            .load-more-replies {
              margin-top: 8px;
            }
          }
        }
      }
      
      .load-more-comments {
        display: flex;
        justify-content: center;
        margin-top: 24px;
      }
    }
  }
  
  .related-works-card {
    .related-works-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 16px;
      
      .related-work-card {
        cursor: pointer;
        border-radius: 8px;
        overflow: hidden;
        transition: transform 0.2s, box-shadow 0.2s;
        
        &:hover {
          transform: translateY(-4px);
          box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
        }
        
        .related-work-thumbnail {
          position: relative;
          height: 140px;
          overflow: hidden;
          
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          
          .related-work-duration {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 12px;
          }
        }
        
        .related-work-info {
          padding: 12px;
          
          .related-work-title {
            margin: 0 0 8px 0;
            font-size: 14px;
            font-weight: 500;
            line-height: 1.4;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          
          .related-work-meta {
            display: flex;
            flex-direction: column;
            font-size: 12px;
            color: var(--text-color-secondary);
            
            .related-work-creator {
              margin-bottom: 4px;
            }
          }
        }
      }
    }
  }
}

.share-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
  
  .share-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.2s;
    
    &:hover {
      transform: translateY(-4px);
    }
    
    span {
      font-size: 14px;
    }
  }
}

.share-link {
  margin-top: 16px;
}

.report-form {
  .report-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .work-detail-container {
    padding: 10px;
    
    .work-info-section {
      .work-title {
        font-size: 20px;
      }
      
      .work-stats {
        flex-wrap: wrap;
      }
      
      .action-buttons {
        justify-content: space-between;
      }
    }
    
    .comments-section {
      .comment-item {
        .comment-content {
          .replies-list {
            margin-left: 12px;
          }
        }
      }
    }
  }
  
  .share-options {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style> 